<template>
  <div>
    <table-ext :columns="columns" :searchForm="searchForm" :config="config" ref="tableExt">
       <template slot="table-action">
          <el-button type="primary" icon="el-icon-plus" @click="addSrmPurGroup()">新增</el-button>
       </template>
    </table-ext>
    <!-- 新增&修改弹框 -->
    <el-dialog :title="dialogUpdate?'修改':'新增' + config.title" :visible.sync="dialogFormVisible">
      <el-form :model="addOrUpdateForm" :rules="rules" ref="addOrUpdateForm" label-width="120px">
        <el-form-item label="采购组编码:" prop="purGroupCode" style="margin-bottom: 22px">
          <el-input v-model="addOrUpdateForm.purGroupCode"></el-input>
        </el-form-item>
        <el-form-item label="采购组名称:" prop="purGroupName" style="margin-bottom: 22px">
          <el-input v-model="addOrUpdateForm.purGroupName"></el-input>
        </el-form-item>
        <el-form-item label="采购组织" prop="purOrgId">
          <el-select v-model="addOrUpdateForm.purOrgId" placeholder="请选择">
            <el-option v-for="item in purOrgs" :key="item.id" :label="item.purOrgName" :value="item.id">
           </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关联ERP采购组" prop="mdPurGroupId">
          <el-select v-model="addOrUpdateForm.mdPurGroupId" placeholder="请选择">
            <el-option v-for="item in relationPurGroup" :key="item.id" :label="item.purGroupName" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('addOrUpdateForm'); dialogFormVisible = false">取 消</el-button>
        <el-button type="info" @click="resetForm('addOrUpdateForm')" v-if="!dialogUpdate">重置</el-button>
        <el-button type="primary" @click="addOrUpdate('addOrUpdateForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
   import TableExt from '@/components/common/table-ext/table-ext.vue';
   import TableIcon from '@/components/common/table-ext/table-icon';
   export default {
    // 引入自定义表格组件
     components:{
      'table-ext': TableExt
     },
     data() {
       return {
        // 当前登陆用户采购组织
        purOrgs: [],
        // 获取所有的ERP采购组
        relationPurGroup: [],
          // 弹框显示控制
        dialogFormVisible: false,
        // 新增|修改弹框控制
        dialogUpdate: false,
        // 弹框属性
        addOrUpdateForm: {
          purGroupCode:'',
          purGroupName: '',
          purOrgId: '',
          mdPurGroupId:''
        },
         // 验证规则
        rules: {
          purGroupCode: [
            { required: true, message: '请输入采购组编码', trigger: 'blur' }
          ],
          purGroupName: [
            { required: true, message: '请输入采购组名称', trigger: 'blur' },
          ],
          purOrgId: [
            { required: true, message: '请选择采购组织', trigger: 'blur' }
          ],
          mdPurGroupId: [
            { required: true, message: '请选择ERP采购组', trigger: 'blur' }
          ]
        },
        config:{ // 页面共通配置
          title: 'SRM采购组', //页面标题
          isPage: true, //是否分页
          isNo: false, //是否显示序号
          selection: false, //是否显示复选框
          crudMapping:{ // CRUD方法
            query:{
              url: this.lib.config.host.masterData +  "/mdata/purOrgMgt/purGroup/query"
            }
          }
        },
        // 查询表单配置
        searchForm:[{
          //显示标签
          label: '采购组编码', 
          //数据字段
          key: 'purGroupCode', 
          //标签类型
          type: 'input' 
        },{
          label: '采购组名称',
          key: 'purGroupName',
          type: 'input'
        },{
          label: '采购组织名称',
          key: 'purOrgName',
          type: 'input'
        }],
        // 表格列定义
        columns:[{
          width:'200',
          label: '操作', // 表格header
          render:(createElement, params)=>{ // 动态渲染，click事件示例
            let _this = this;
            return createElement('div', {}, 
            [createElement('el-button', {
                props: {
                  type: 'text',
                },
                on: {
                  click() {
                    _this.addOrUpdateForm = Object.assign({}, _this.addOrUpdateForm, params.row);
                    _this.dialogUpdate = true;
                    _this.dialogFormVisible = true;
                  }
                }
              }, '编辑')
            ]);
          }
        },{
          label: '采购组编码',
          key: 'purGroupCode'
        },{
          label: '采购组名称',
          key: 'purGroupName'
        },{
          label: '采购组织名称',
          key: 'purOrgName'
        },{
          label: 'ERP采购组名称',
          key: 'mdPurGroupName'
        }],
      };
    },
    mounted(){ // VUE页面渲染之后调用的方法
      this.initData();
    },
    methods: {
      // 初始化页面数据
      initData(){
        // 获取采购组织
        this.getSelectData('get', this.lib.config.host.masterData + '/system/purOrgMgt/purOrg/getPurOrgByUserId/' + this.getCurrUserId(), {}, 'id', 'purOrgName').then((data)=>{
          this.purOrgs = data;
        });
        // 获取erp采购组
        this.getSelectData('post', this.lib.config.host.masterData + '/mdata/purOrgMgt/purGroupErp/getAll', {}, 'id', 'purGroupName').then((data)=>{
          debugger;
          this.relationPurGroup = data;
        });
      },
      // 触发新增|修改
      addOrUpdate(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.axios.post(this.lib.config.host.masterData +  "/mdata/purOrgMgt/purGroup/saveOrUpdate", this.addOrUpdateForm).then((res)=>{
                this.$refs['tableExt'].refreshTable();
                this.dialogFormVisible = false;
            }).catch((e)=>{
              this.$message({
                type: 'info',
                message: '失败！'
              });
            });
          } else {
            return false;
          }
        });
      },
      // 新增专家
      addSrmPurGroup(){
        this.dialogUpdate = false;
        this.dialogFormVisible = true;
        this.$nextTick(()=>{
          this.resetForm('addOrUpdateForm');
        });
      }
    }
  }
</script>